<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>

    <!--- basic page needs
    ================================================== -->
    <meta charset="utf-8">
    <title>Steven Lee</title>
    <meta name="Title" content="self website by Steven Lee">
    <meta name="Author" content="Steven Lee">
    <meta name="description" content="self website by Steven Lee,contains0 self introduce、project demo online、blog..."/>
    <meta name="Keywords" content="github-page resume">

    <!-- mobile specific metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/vendor.css">


    <!-- script
    ================================================== -->
    <script src="js/modernizr.js"></script>
    <script src="js/pace.min.js"></script>

    <!-- favicons
     ================================================== -->
    <link rel="icon" type="image/png" href="favicon.png">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-122234127-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'UA-122234127-1');
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://pages.github.com",
      "@type": "personal",
      "url": "https://momodiy.github.io",
      "name": "Steven Lee's github page",
      "contactPoint": {
        "@type": "ContactPoint",
        "email": "qcstevengo@gmail.com",
        "contactType": "Customer service"
      }
    }

    </script>

</head>

<body id="top">

<!-- header
================================================== -->
<header>
    <div class="row">

        <div class="top-bar">
            <a class="menu-toggle" href="#"><span>Menu</span></a>

            <div class="logo">
                <a href="index.html">Steven Lee</a>
            </div>

            <nav id="main-nav-wrap">
                <ul class="main-navigation">
                    <li class="current"><a class="smoothscroll" href="#intro" title="">Home</a></li>
                    <li><a class="smoothscroll" href="#about" title="">About</a></li>
                    <li><a class="smoothscroll" href="#resume" title="">Resume</a></li>
                    <li><a class="smoothscroll" href="#services" title="">Services</a></li>
                    <li><a class="smoothscroll" href="#contact" title="">Contact</a></li>
                </ul>
            </nav>
        </div> <!-- /top-bar -->

    </div> <!-- /row -->
</header> <!-- /header -->

<!-- intro section
================================================== -->
<section id="intro">

    <div class="intro-overlay"></div>

    <div class="intro-content">
        <div class="row">

            <div class="col-twelve">

                <h5>Hello World!</h5>
                <h1>I'm Steven Lee.</h1>

                <p class="intro-position">
                    <span>Front-end Developer</span>
                    <span>Node.js Developer</span>
                    <span>UI/UX Designer</span>
                </p>

                <a class="button stroke smoothscroll" href="#about" title="">More About Me</a>

            </div>

        </div>
    </div> <!-- /intro-content -->

    <ul class="intro-social">
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://github.com/momodiy" rel="nofollow"><i class="fa fa-github"></i></a></li>
        <li><a href="https://mobile.twitter.com/steven____lee" rel="nofollow"><i class="fa fa-twitter"></i></a></li>
        <li><a href="mailto:qcstevengo@gmail.com" target="_blank" rel="nofollow"><i class="fa fa-envelope"></i></a></li>
        <li><a href="#"><i class="fa fa-stack-overflow" rel="nofollow"></i></a></li>
    </ul> <!-- /intro-social -->

</section> <!-- /intro -->


<!-- about section
================================================== -->
<section id="about">

    <div class="row section-intro">
        <div class="col-twelve">

            <h5>About</h5>
            <h1>Let me introduce myself.</h1>

            <div class="intro-info">

                <img src="images/avatar.webp" alt="Steven's avatar">

                <!--<p class="lead">Lorem ipsum Exercitation culpa qui dolor consequat exercitation fugiat laborum ex ea-->
                <!--eiusmod ad do aliqua occaecat nisi ad irure sunt id pariatur Duis laboris amet exercitation veniam-->
                <!--labore consectetur ea id quis eiusmod.</p>-->
                <p class="lead">Front-end enthusiasts<br>
                    Love Node.JS and visualization<br>
                    Web full stack engineer
                </p>
            </div>

        </div>
    </div> <!-- /section-intro -->

    <div class="row about-content">

        <div class="col-six tab-full">

            <h3>Profile</h3>
            <p>Majoring in software engineering.Became a front-end engineer two years ago<br>
                Still enjoying my job...</p>

            <ul class="info-list">
                <li>
                    <strong>Fullname:</strong>
                    <span>Steven Lee</span>
                </li>
                <li>
                    <strong>Birthday:</strong>
                    <span>November 22, 1994</span>
                </li>
                <li>
                    <strong>Job:</strong>
                    <span>Frontend Developer,Node.js Developer</span>
                </li>
                <li>
                    <strong>Mobil:</strong>
                    <span>181****5031</span>
                </li>
                <li>
                    <strong>Email:</strong>
                    <span>qcstevengo@gmail.com</span>
                </li>

            </ul> <!-- /info-list -->

        </div>

        <div class="col-six tab-full">

            <h3>Skills</h3>
            <p>
                As a familiar front-end developer proficient in UI/UX.Familiar with various http protocols and privilege
                authentication.Familiar with the mainstream web framework.
            </p>

            <ul class="skill-bars">
                <li>
                    <div class="progress percent90"><span>90%</span></div>
                    <strong>HTML5</strong>
                </li>
                <li>
                    <div class="progress percent85"><span>85%</span></div>
                    <strong>CSS3</strong>
                </li>
                <li>
                    <div class="progress percent80"><span>80%</span></div>
                    <strong>JQuery</strong>
                </li>
                <li>
                    <div class="progress percent75"><span>75%</span></div>
                    <strong>Node.js</strong>
                </li>
                <li>
                    <div class="progress percent75"><span>75%</span></div>
                    <strong>AngularJS</strong>
                </li>

            </ul> <!-- /skill-bars -->

        </div>

    </div>

    <div class="row button-section">
        <div class="col-twelve">
            <a href="#contact" title="Hire Me" class="button stroke smoothscroll">Hire Me</a>
            <!--<a title="Download CV" class="button button-primary" href="docs/resume.pdf" download="test" rel="nofollow">Download-->
                <!--CV</a>-->
            <a title="Download CV" class="button button-primary" download="test" rel="nofollow">Download
                CV</a>
        </div>
    </div>

</section> <!-- /process-->


<!-- resume Section
================================================== -->
<section id="resume" class="grey-section">

    <div class="row section-intro">
        <div class="col-twelve">

            <h5>Resume</h5>
            <h1>More of my credentials.</h1>

            <p class="lead">Because of love, so do your best to be a better man.
            </p>

        </div>
    </div> <!-- /section-intro-->

    <div class="row resume-timeline">

        <div class="col-twelve resume-header">

            <h2>Work Experience</h2>

        </div> <!-- /resume-header -->

        <div class="col-twelve">

            <div class="timeline-wrap">

                <div class="timeline-block">

                    <div class="timeline-ico">
                        <i class="fa fa-graduation-cap"></i>
                    </div>

                    <div class="timeline-header">
                        <h3>Fount-end developer</h3>
                        <p>January 2018 - Present</p>
                    </div>

                    <div class="timeline-content">
                        <h4>Incat manage</h4>
                        <p>The incat security analysis system management terminal is mainly responsible for using
                            es6/es7 to write page logic and native js simulation Angularjs components to implement
                            privilege control logic (including button level and menu level)<br>
                            Echarts visualization data display <br>
                            Docking server api operation configuration information
                        </p>
                    </div>

                </div> <!-- /timeline-block -->

                <div class="timeline-block">

                    <div class="timeline-ico">
                        <i class="fa fa-graduation-cap"></i>
                    </div>

                    <div class="timeline-header">
                        <h3>Front-end Developer</h3>
                        <p>October 2017 - November 2017</p>
                    </div>

                    <div class="timeline-content">
                        <h4>Erealm official website</h4>
                        <p>Developed using maen.js（mongoose+angularjs+node+express）<br>
                            Use angular-translate to complete multiple languages<br>
                            Import https(SSL) to ensure data transmission security
                        </p>
                    </div>

                </div> <!-- /timeline-block -->

                <div class="timeline-block">

                    <div class="timeline-ico">
                        <i class="fa fa-graduation-cap"></i>
                    </div>

                    <div class="timeline-header">
                        <h3>Web Designer & Node.js Developer</h3>
                        <p>May 2017 - November 2017</p>
                    </div>

                    <div class="timeline-content">
                        <h4>Education Axis</h4>
                        <p>Developed using maen.js（mongoose+angularjs+node+express）<br>
                            Use the bootstrap(less/sass) page layout<br>
                            Write interfaces that conforms to the restful API specification<br>
                            use mocha API test(should.js assertion library)<BR>
                            use grunt to package and compilation<br>
                            permission authentication（http Basic/http bearer/OAuth2）<br>
                            Design database table structure</p>
                    </div>

                </div> <!-- /timeline-block -->

                <div class="timeline-block">

                    <div class="timeline-ico">
                        <i class="fa fa-graduation-cap"></i>
                    </div>

                    <div class="timeline-header">
                        <h3>Web Designer & Node.js Developer</h3>
                        <p>June 2016 - May 2017</p>
                    </div>

                    <div class="timeline-content">
                        <h4>Intelligent education</h4>
                        <p>Developed using maen.js（mongoose+angularjs+node+express）<br>
                            Use the bootstrap(less/sass) page layout<br>
                            Write interfaces that conforms to the restful API specification<br>
                            use mocha API test(chai.js assertion library)<br>
                            use grunt to package and compilation
                        </p>
                    </div>

                </div> <!-- /timeline-block -->

            </div> <!-- /timeline-wrap -->

        </div> <!-- /col-twelve -->

    </div> <!-- /resume-timeline -->

    <div class="row resume-timeline">

    </div> <!-- /resume-timeline -->

</section> <!-- /features -->


<!-- services Section
================================================== -->
<section id="services">

    <div class="overlay"></div>

    <div class="row section-intro">
        <div class="col-twelve">

            <h5>Services</h5>
            <h1>What Can I Do For You?</h1>

            <p class="lead">A beautiful responsive website、a lightweight but high performance node server,a beautiful
                animation or a fun mini-game...if you like.</p>

        </div>
    </div> <!-- /section-intro -->

    <div class="row services-content">

        <div id="owl-slider" class="owl-carousel services-list">

            <div class="service">

                <span class="icon"><i class="icon-earth"></i></span>

                <div class="service-content">

                    <h3>Webdesign</h3>

                    <p class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit.
                    </p>

                </div>

            </div> <!-- /service -->

            <div class="service">

                <span class="icon"><i class="icon-window"></i></span>

                <div class="service-content">

                    <h3>Web Development</h3>

                    <p class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit.
                    </p>

                </div>

            </div> <!-- /service -->

            <div class="service">

                <span class="icon"><i class="icon-paint-brush"></i></span>

                <div class="service-content">

                    <h3>Branding</h3>

                    <p class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit.
                    </p>

                </div>

            </div> <!-- /service -->

            <div class="service">

                <span class="icon"><i class="icon-toggles"></i></span>

                <div class="service-content">

                    <h3>UI/UX Design</h3>

                    <p class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit.
                    </p>

                </div>

            </div> <!-- /service -->

            <div class="service">

                <span class="icon"><i class="icon-image"></i></span>

                <div class="service-content">

                    <h3>Graphics Design</h3>

                    <p class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit.
                    </p>

                </div>

            </div> <!-- /service -->

            <div class="service">

                <span class="icon"><i class="icon-chat"></i></span>

                <div class="service-content">

                    <h3>Consultancy</h3>

                    <p class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit.
                    </p>

                </div>

            </div> <!-- /service -->

        </div> <!-- /services-list -->

    </div> <!-- /services-content -->

</section> <!-- /services -->


<!-- stats Section
================================================== -->
<section id="stats" class="count-up">

    <div class="row">
        <div class="col-twelve">

            <div class="block-1-6 block-s-1-3 block-tab-1-2 block-mob-full stats-list">

                <div class="bgrid stat">

                    <div class="icon-part">
                        <i class="icon-pencil-ruler"></i>
                    </div>

                    <h3 class="stat-count">
                        50
                    </h3>

                    <h5 class="stat-title">
                        Projects Completed
                    </h5>

                </div> <!-- /stat -->

                <div class="bgrid stat">

                    <div class="icon-part">
                        <i class="icon-users"></i>
                    </div>

                    <h3 class="stat-count">
                        100
                    </h3>

                    <h5 class="stat-title">
                        Published Blog
                    </h5>

                </div> <!-- /stat -->

                <div class="bgrid stat">

                    <div class="icon-part">
                        <i class="icon-badge"></i>
                    </div>

                    <h3 class="stat-count">
                        30000
                    </h3>

                    <h5 class="stat-title">
                        Blog Browsing
                    </h5>

                </div> <!-- /stat -->

                <div class="bgrid stat">

                    <div class="icon-part">
                        <i class="icon-light-bulb"></i>
                    </div>

                    <h3 class="stat-count">
                        120
                    </h3>

                    <h5 class="stat-title">
                        Crazy Ideas
                    </h5>

                </div> <!-- /stat -->

                <div class="bgrid stat">

                    <div class="icon-part">
                        <i class="icon-cup"></i>
                    </div>

                    <h3 class="stat-count">
                        100000
                    </h3>

                    <h5 class="stat-title">
                        Coding Lines
                    </h5>

                </div> <!-- /stat -->

                <div class="bgrid stat">

                    <div class="icon-part">
                        <i class="icon-clock"></i>
                    </div>

                    <h3 class="stat-count">
                        7200
                    </h3>

                    <h5 class="stat-title">
                        Hours
                    </h5>

                </div> <!-- /stat -->

            </div> <!-- /stats-list -->

        </div> <!-- /twelve -->
    </div> <!-- /row -->

</section> <!-- /stats -->


<!-- contact
================================================== -->
<section id="contact">

    <div class="row section-intro">
        <div class="col-twelve">

            <h5>Contact</h5>
            <h1>I'd Love To Hear From You.</h1>

            <p class="lead">If you have anything to find me you can leave me a message on this website.Please leave your
                correct information if it is convenient.<br>
                I'm Looking forward to your message.thank you!</p>
        </div>
    </div> <!-- /section-intro -->

    <div class="row contact-form">

        <div class="col-twelve">

            <!-- form -->
            <form name="contactForm" id="contactForm" method="post" action="">
                <fieldset>

                    <div class="form-field">
                        <input name="contactName" type="text" id="contactName" placeholder="Name" value="" minlength="2"
                               required="" autocomplete="off">
                    </div>
                    <div class="form-field">
                        <input name="contactEmail" type="email" id="contactEmail" placeholder="Email" value=""
                               required="" autocomplete="off">
                    </div>
                    <div class="form-field">
                        <input name="contactSubject" type="text" id="contactSubject" placeholder="Subject" value=""
                               autocomplete="off">
                    </div>
                    <div class="form-field">
                        <textarea name="contactMessage" id="contactMessage" placeholder="message" rows="10" cols="50"
                                  required="" autocomplete="off"></textarea>
                    </div>
                    <div class="form-field">
                        <button class="submitform">Submit</button>
                        <div id="submit-loader">
                            <div class="text-loader">Sending...</div>
                            <div class="s-loader">
                                <div class="bounce1"></div>
                                <div class="bounce2"></div>
                                <div class="bounce3"></div>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form> <!-- Form End -->

            <!-- contact-warning -->
            <div id="message-warning">
            </div>
            <!-- contact-success -->
            <div id="message-success">
                <i class="fa fa-check"></i>Your message was sent, thank you!<br>
            </div>

        </div> <!-- /col-twelve -->

    </div> <!-- /contact-form -->

    <div class="row contact-info">

        <div class="col-four tab-full">

            <div class="icon">
                <i class="icon-pin"></i>
            </div>

            <h5>Where to find me</h5>

            <p>
                Xi'an, Shaanxi<br>
                🇨🇳 China
            </p>

        </div>

        <div class="col-four tab-full collapse">

            <div class="icon">
                <i class="icon-mail"></i>
            </div>

            <h5>Email Me At</h5>

            <p>qcstevengo@gmail.com<br>
                qcjy16@126.com
            </p>

        </div>

        <div class="col-four tab-full">

            <div class="icon">
                <i class="icon-phone"></i>
            </div>

            <h5>Call Me At</h5>

            <p>Mobile: (+86) 181 **** 5031<br>
                <!--Mobile: (+63) 555 0100<br>-->
                <!--Fax: (+63) 555 0101-->
            </p>

        </div>

    </div> <!-- /contact-info -->

</section> <!-- /contact -->


<!-- footer
================================================== -->

<footer>
    <div class="row">

        <div class="col-six tab-full pull-right social">

            <ul class="footer-social">
                <li><a href="#"><i class="fa fa-facebook" rel="nofollow"></i></a></li>
                <li><a href="https://github.com/momodiy" rel="nofollow"><i class="fa fa-github"></i></a></li>
                <li><a href="https://mobile.twitter.com/steven____lee" rel="nofollow"><i class="fa fa-twitter"></i></a>
                </li>
                <li><a href="mailto:qcstevengo@gmail.com" target="_blank" rel="nofollow"><i class="fa fa-envelope"></i></a>
                </li>
                <li><a href="#" rel="nofollow"><i class="fa fa-stack-overflow"></i></a></li>
            </ul>

        </div>

        <div class="col-six tab-full">
            <div class="copyright">
                <span>© Copyright Steven Lee 2018.</span>
            </div>
        </div>

        <div id="go-top">
            <a class="smoothscroll" title="Back to Top" href="#top"><i class="fa fa-long-arrow-up"></i></a>
        </div>

    </div> <!-- /row -->
</footer>

<div id="preloader">
    <div id="loader"></div>
</div>

<!-- Java Script
================================================== -->
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

</body>

</html>